<template>
	<!-- 新闻item -->
	<view class="news_box">
		<view class="img">
			<image :src="item.imgUrl" mode="aspectFill">
		</view>
		<view class="text">
			<view class="title">{{item.title}}</view>
			<view class="info" v-if="!item.lookTime">
				<text>{{item.author}}</text>
				<text>{{item.readCount}}浏览</text>
			</view>
			<view class="info" v-else>
				<text>浏览时间：{{item.lookTime}}</text>
			</view>
		</view>
	</view> 
</template>

<script>
	export default {
		name:"newsItem",
		props:{
			item:{
				type:Object,
				default(){
					return{
						title:"标题",
						author:"作者",
						readCount:0,
						imgUrl:"/static/logo.png",
						lookTime:"2025-7-17 20:15"
					}
				}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.news_box{
	display: flex;//是图片和文本一行显示
	.img{
		width: 230rpx;
		height: 160rpx;
		image{
			width: 100%;
			height:100%;
		}
	}
	.text{
		//border: 1px solid red;
		flex: 1 1 0;//flex:1;相当于flex:1 1 0;
		padding-left: 20rpx;
		.title{
			font-size: 34rpx;
			color: #333;
			
			width: 300px;           /* 固定宽度 */
			white-space: nowrap;    /* 禁止换行 */
			overflow: hidden;       /* 隐藏溢出内容 */
			text-overflow: ellipsis;/* 显示省略号 */
		}
		.info{
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #999;
			text{
				padding-right: 100rpx;
			}
		}
	}
}
</style>